{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>滚动条</li>
  </ol>
<section class="demo-section">
<div id="pageContent">





<article><p>ZUI也针对浏览器的滚动条进行了样式优化。</p><div class="alert alert-warning">
  <h4>提示</h4>
  <p>滚动条样式仅仅使用桌面浏览器，在设备屏幕宽度小于 <code>768px</code> 时不会应用滚动条样式。</p>
</div><div class="alert alert-warning">
  <h4>浏览器兼容性</h4>
  <p>滚动条样式目前仅支持Webkit内核浏览器。</p>
</div></article>


<section><header><h3>基本样式</h3></header><article><div style="max-height: 100px; max-width:250px; overflow: scroll; scroll: both" class="example panel">
  <h1>滚动条样式测试</h1>
  <p>一些文字</p>
  <p>更多的文字</p>
  <p>更多的文字</p>
  <p>更多的文字</p>
  <p>
  长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本。</p>
  <div class="alert" style="width: 300px">
    <h4>较宽的内容。</h4>
  </div>
</div></article></section>



<section><header><h3>动态隐藏与显示</h3></header><article><p>为可滚动的容器元素添加 <code>.scrollbar-hover</code> 类，即可在默认情况下隐藏滚动条，在鼠标悬停在容器元素区域时显示滚动条。</p><div class="example">
  <div style="max-height: 100px; max-width:250px; overflow: scroll; scroll: both" class="panel panel-body scrollbar-hover">
    <h1>鼠标悬停此区域才显示滚动条</h1>
    <p>一些文字</p>
    <p>更多的文字</p>
    <p>更多的文字</p>
    <p>更多的文字</p>
    <p>
    长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本。</p>
    <div class="alert" style="width: 300px">
      <h4>较宽的内容。</h4>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"scrollbar-hover"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">max</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln"> scroll</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section></div>
</section>
{/block}